<template>
    <div class="app-container">
        <div class="main-container">
            <div class="page-header">
                <router-link class="back-link" to="/main/renshi/yuangongdangan/yuangongguanli/yuangongguanli">
                    <i class="el-icon-arrow-left"></i>
                    返回
                </router-link>
                <h1>员工工作履历信息</h1>
            </div>
        </div>
        <div class="search-bar">
            <input class="search-input" type="text" v-model="searchKeyword" placeholder="输入姓名或职位进行查询">
            <button class="btn" @click="searchPersonnel">查询</button>
            <button class="btn" @click="resetSearch">重置</button>
            <select class="sel" v-model="genderFilter" @change="genderFilterChange">
                <option value="">性别筛选</option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            <button class="new">
                <router-link to="/main/renshi/dangan/employeeFileInfoStream">新增</router-link>
            </button>
        </div>

        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th><input type="checkbox" v-model="isAllSelected" @change="toggleAllSelection"></th>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>学历</th>
                        <th>职位</th>
                        <th>填表日期</th>
                        <th>详情</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(person, index) in personnelData" :key="index">
                        <td>
                            <input type="checkbox" v-model="selectedPersonnel" :value="person"
                                @change="updateAllSelectedStatus">
                        </td>
                        <td>{{ (currentPage - 1) * pageSize + index + 1 }}</td>
                        <td>{{ person.name }}</td>
                        <td>{{ person.gender }}</td>
                        <td>{{ person.hometown }}</td>
                        <td>{{ person.applicationPosition }}</td>
                        <td v-if="person.applicationYear">
                            {{ person.applicationYear }}年{{ person.applicationMonth }}月{{ person.applicationDay }}日
                        </td>
                        <td v-else>-</td>
                        <td>
                            <router-link class="link-button"
                                :to="{ name: 'employeeFileInfoView', params: { id: person.id, mode: 'view' } }">
                                查看详情
                            </router-link>
                        </td>
                        <td class="action-buttons">
                            <button class="edit-button" @click="editEmployee(person.id)">编辑</button>
                            <button class="delete-button" @click="deleteEmployee(person.id)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="pagination">
            <button class="page-btn" :disabled="currentPage === 1" @click="prevPage">上一页</button>
            <span class="page-info">
                第 <input type="number" v-model="currentPage" min="1" :max="totalPages"> 页
                共 {{ totalPages }} 页
            </span>
            <button class="page-btn" :disabled="currentPage === totalPages" @click="nextPage">下一页</button>
        </div>
    </div>
</template>

<script>
import { getEmployeeFilePage, removeEmployeeFiles } from '@/api/employee';

export default {
    name: "renyuanZiliao",
    data() {
        return {
            personnelData: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            selectedPersonnel: [],
            isAllSelected: false,
            searchKeyword: '',
            genderFilter: ''
        };
    },
    computed: {
        totalPages() {
            return Math.ceil(this.total / this.pageSize);
        }
    },
    methods: {
        goBack() {
            this.$router.back();
        },
        async fetchData() {
            try {
                const params = {
                    current: this.currentPage,
                    size: this.pageSize,
                    keyword: this.searchKeyword,
                    gender: this.genderFilter
                };
                const response = await getEmployeeFilePage(params);
                console.log('Response:', response);
                if (response.data.code === 200) {
                    if (response.data.data && Array.isArray(response.data.data.records)) {
                        this.personnelData = response.data.data.records;
                        this.total = response.data.data.total;
                        console.log('Personnel Data:', this.personnelData);
                    } else {
                        this.$message.warning('暂无数据');
                        this.personnelData = [];
                        this.total = 0;
                    }
                } else {
                    this.$message.error(response.data.message || "获取数据失败");
                }
            } catch (error) {
                console.error("获取员工列表失败:", error);
                this.$message.error("获取员工列表失败");
            }
        },

        // 查询人员
        searchPersonnel() {
            this.currentPage = 1; // 重置页码
            this.fetchData();
        },

        // 性别筛选
        genderFilterChange() {
            this.currentPage = 1; // 重置页码
            this.fetchData();
        },

        // 重置查询
        resetSearch() {
            this.searchKeyword = '';
            this.genderFilter = '';
            this.currentPage = 1;
            this.fetchData();
        },

        prevPage() {
            if (this.currentPage > 1) {
                this.currentPage--;
                this.fetchData();
            }
        },

        nextPage() {
            if (this.currentPage < this.totalPages) {
                this.currentPage++;
                this.fetchData();
            }
        },

        editEmployee(id) {
            this.$router.push({
                name: 'employeeFileInfoView',
                params: {
                    id,
                    mode: 'edit'
                }
            });
        },

        async deleteEmployee(id) {
            try {
                // 添加确认对话框
                const confirmResult = await this.$confirm(
                    '此操作将永久删除该员工信息, 是否继续?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                );

                if (confirmResult === 'confirm') {
                    await removeEmployeeFiles([id]);
                    this.$message.success("删除成功");
                    this.fetchData();
                }
            } catch (error) {
                if (error === 'cancel') {
                    this.$message.info('已取消删除');
                } else {
                    console.error("删除员工失败:", error);
                    this.$message.error("删除员工失败");
                }
            }
        },

        // 全选
        toggleAllSelection() {
            if (this.isAllSelected) {
                this.selectedPersonnel = [...this.personnelData];
            } else {
                this.selectedPersonnel = [];
            }
        },

        // 更新全选状态
        updateAllSelectedStatus() {
            this.isAllSelected = this.personnelData.length > 0 &&
                this.selectedPersonnel.length === this.personnelData.length;
        }
    },
    created() {
        // 组件创建时获取数据
        this.fetchData();
    },
    watch: {
        currentPage(newVal) {
            if (newVal < 1) {
                this.currentPage = 1;
            } else if (newVal > this.totalPages) {
                this.currentPage = this.totalPages;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
    padding: 10px;
    // background-color: #f5f7fa;
    min-height: calc(100vh - 20px);
}

.main-container {
    margin: 0 auto;
}

.page-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    background-color: #fff;
    padding: 0px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

    .back-link {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #409EFF;
        font-size: 14px;
        margin-right: 20px;
        transition: all 0.3s;

        i {
            margin-right: 5px;
        }

        &:hover {
            opacity: 0.8;
        }
    }

    h1 {
        margin: 0;
        font-size: 20px;
        font-weight: 500;
        color: #303133;
    }
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    margin-bottom: 0;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .search-input {
        padding: 10px 16px;
        width: 240px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        font-size: 14px;
        transition: all 0.3s;

        &:focus {
            border-color: #409eff;
            outline: none;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }

        &::placeholder {
            color: #909399;
        }
    }

    .btn,
    .new {
        padding: 10px 20px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        background-color: white;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 14px;
        color: #606266;

        &:hover {
            color: #409eff;
            border-color: #c6e2ff;
            background-color: #ecf5ff;
        }
    }

    .sel {
        padding: 10px 16px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        outline: none;
        font-size: 14px;
        color: #606266;
        min-width: 120px;
        transition: all 0.3s;

        &:focus {
            border-color: #409eff;
        }
    }

    .new {
        margin-left: auto;
        background-color: #409eff;
        color: white;
        border: none;

        &:hover {
            background-color: #66b1ff;
            color: white;
        }

        a {
            text-decoration: none;
            color: inherit;
        }
    }
}

.table-container {
    margin: 10px 0px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;

    table {
        width: 100%;
        border-collapse: collapse;

        th,
        td {
            padding: 16px;
            border: 1px solid #ebeef5;
            text-align: center;
            font-size: 14px;
            color: #606266;
        }

        th {
            background-color: #f5f7fa;
            font-weight: 500;
            color: #303133;
            white-space: nowrap;
        }

        tbody tr {
            transition: all 0.3s;

            &:hover {
                background-color: #f5f7fa;
            }
        }

        input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
    }
}

.action-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;

    button {
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 14px;
    }

    .edit-button {
        background-color: #409eff;
        color: white;

        &:hover {
            background-color: #66b1ff;
            box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
        }
    }

    .delete-button {
        background-color: #f56c6c;
        color: white;

        &:hover {
            background-color: #f78989;
            box-shadow: 0 2px 6px rgba(245, 108, 108, 0.3);
        }
    }
}

.link-button {
    color: #409eff;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
        background-color: #ecf5ff;
        text-decoration: none;
    }
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .page-btn {
        padding: 8px 16px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        background-color: white;
        cursor: pointer;
        transition: all 0.3s;
        color: #606266;
        font-size: 14px;

        &:disabled {
            cursor: not-allowed;
            opacity: 0.6;
            background-color: #f5f7fa;
        }

        &:not(:disabled):hover {
            color: #409eff;
            border-color: #c6e2ff;
            background-color: #ecf5ff;
        }
    }

    .page-info {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #606266;
        font-size: 14px;

        input {
            width: 60px;
            padding: 8px;
            text-align: center;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            outline: none;
            transition: all 0.3s;

            &:focus {
                border-color: #409eff;
                box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
            }
        }
    }
}
</style>